<script setup>
import FormComp from './Form';
import ListComp from './List';

import { provide } from 'vue';
import { todoReducer, ADD_TODO, TOGGLE_TODO, REMOVE_TODO } from './store';

//执行reducer获取中央状态
const { todoList, addCount, removeCount, todoDispatch } = todoReducer();

//向孙组件提供方法
provide('todoHandlers', {
  toggleTodo: todoDispatch(TOGGLE_TODO),
  removeTodo: todoDispatch(REMOVE_TODO)
});

//执行hooks里的dispatch方法,传入type
const addTodo = todoDispatch(ADD_TODO);
</script>

<template>
  <form-comp @add-todo="addTodo"></form-comp>
  <list-comp
    :todo-list="todoList"
    :add-count="addCount"
    :remove-count="removeCount"
  ></list-comp>
</template>
